<template>
    <div class="top-header">
        <div class="top-left">
            <h1>电商运营管理系统</h1>
            <el-icon>
                <Grid />
            </el-icon>
        </div>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{ store.username }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown, Grid } from '@element-plus/icons-vue'
import { useUserStore } from "@/store"
import { useRouter } from 'vue-router';
import { Router } from 'express';
import { ro } from 'element-plus/es/locale';
const store = useUserStore()
const router = useRouter()
const handleCommand = (command: string) => {
    switch (command) {
        case "home":
            router.push('/index')
            break;

        case "logout":
            // 页目退出登录
            // 删除token
            localStorage.removeItem("token")
            // 页目跳转到登录页面
            router.push('/login')
            //  删除路由
            store.activeMenus.forEach(item =>
                router.removeRoute(item.name)
            )
            router.removeRoute("home")
            // setTimeout(() => {
            //     console.log(router.getRoutes());
            // }, 2000);
            //  清除pinia中数据
            store.username = ""
            store.menus = []

            break;
    }


}
</script>

<style lang="less" scoped>
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    height: 100%;

    .top-left {
        margin: 0;
        display: flex;
        align-items: center;

        h1 {
            margin-right: 10px;
        }

        .el-icon {
            font-size: 20px;
        }
    }

    .el-dropdown {
        color: #fff;
        font-weight: bold;
    }
}
</style>